{% extends 'mac_basic.html' %}
{% load static %}

{% block title %}
    用户列表
{% endblock %}


{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css' %}"  media="all">
    <link rel="stylesheet" href="{% static 'css/my_search.css' %}">
    <link rel="stylesheet" href="{% static 'css/bulk_delete.css' %}">
    <style>
        .user_list {
            padding: 50px 60px 0 50px;
        }
        .user{
            padding-left: 50px;
            padding-bottom: 10px;
            border-bottom: 3px solid #8B8989;
        }
        .user h3 {
            margin-top: 20px;
            margin-bottom: 10px;
        }
        .page {
            float: right;
            margin-right: 60px;
        }
        td,th{
                text-align: center;
        }
        .user_nums {
            width: 114px;
            float: right;
            padding-top: 20px;
            padding-right: 10px;
        }
        .user_count {
            float: right;
            padding-top: 28px;
            padding-right: 10px;
        }
        .user_count span {
            font-weight: bold;
            color: #337ab7;
        }
    </style>
{% endblock %}


{% block content %}
    <div class="user">
        <h3>用户<small> 列表</small></h3>
        <a class="btn btn-primary" href="{% url 'user_add' %}">新增</a>
    </div>
    <div id="baidu_parent">
        {% include 'pub/bulk_delete.html' %}
        <form method="post" action="{% url 'user_list' %}">
            <div id="baidu">
                <div class="input">
                    <input type="text" name="search" placeholder="请输入关健词" id="search"/><span class="clear" id="cls">X</span>
                </div>
                <button>搜索</button>
            </div>
        </form>
    </div>
    <div class="table-responsive user_list">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>#</th>
              <th>用户名</th>
              <th>全名</th>
              <th>创建时间</th>
              <th>手机号</th>
              <th>邮箱</th>
              <th>角色</th>
              <th>部门</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {% for obj in users_obj %}
                <tr>
                  <th scope="row">
                      <span class="forloop">{{forloop.counter}}</span>
                      <div><input type="checkbox" style="display: none" class="input_checkbox" value="{{ obj.id }}"></div>
                  </th>
                  <td>{{ obj.username }}</td>
                  <td>{{ obj.fullname }}</td>
                  <td>{{ obj.create_time|date:"Y-m-d H:i:s" }}</td>
                  <td>{{ obj.phone }}</td>
                  <td>{{ obj.email }}</td>
                  <td>{{ obj.role }}</td>
                  <td>{{ obj.depart_id.all.first.department_name }}</td>
                  <td>
                      {% if obj.role == '系统管理员' %}
                          <a href="{% url 'user_edit'  obj.id %}" class="btn btn-info btn-xs">
                              <i class="fa fa-pencil-square" aria-hidden="true"></i> 修改</a>
                      {% else %}
                          <button type="button" class="btn btn-danger btn-xs" data-toggle="modal"
                              data-target=".bs-example-modal-sm" data-whatever="{% url 'user_delete' obj.id %}">
                              <i class="fa fa-trash-o" aria-hidden="true"></i> 删除
                          </button> |
                          <a href="{% url 'user_edit'  obj.id %}" class="btn btn-info btn-xs">
                              <i class="fa fa-pencil-square" aria-hidden="true"></i> 修改</a>
                      {% endif %}
                  </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
    </div>
    <div class="page">
        <nav aria-label="Page navigation">
          <ul class="pagination">
            {{ pages | safe }}
          </ul>
        </nav>
    </div>
    <div class="user_nums">
        <select id="user_nums" name="user_nums" class="form-control">
              <option value="5">每页5条</option>
              <option value="10">每页10条</option>
              <option value="15">每页15条</option>
              <option value="20">每页20条</option>
              <option value="25">每页25条</option>
              <option value="30">每页30条</option>
              <option value="40">每页40条</option>
        </select>
    </div>
    <div class="user_count">
        总共 <span>{{ user_count }}</span> 位用户
    </div>
{% endblock %}


{% block model %}
    <div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
            <a href="#" class="btn btn-primary">确 定</a>
          </div>
        </div>
      </div>
    </div>
{% endblock %}


{% block js %}
    <script src="{% static 'js/bulk_delete.js' %}"></script>
    <script src="{% static 'plugins/layui/layui.js' %}" charset="utf-8"></script>
    <script>
        layui.use('layer', function () {
            var layer = layui.layer
            $('.define_delete').click(function () {
                var list = []
                var $id_list = $('.input_checkbox:checked')
                $.each($id_list, function (index, item) {
                    list.push($(item).val())
                })
                $.ajax({
                    url: '{% url "bulk_delete" %}',
                    type: 'POST',
                    data: {'mac_details_id_list':list, 'url': "{% url 'user_list' %}"},
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            layer.msg('删除成功', {icon: 1, time: 2000}, function () {
                                window.location.replace("{% url 'user_list'%}");
                            })
                        }else {
                            layer.msg('请选择要删除项', {icon: 3, time:1500})
                        }
                    }
                })
        })
        })

    </script>
    <script>
        document.getElementById("search").addEventListener("keyup",function(){
            if(this.value.length>0)
            {
                document.getElementById("cls").style.visibility="visible";
                document.getElementById("cls").onclick=function()
                {
                    document.getElementById("search").value="";
                }
            }else
            {
                document.getElementById("cls").style.visibility="hidden";
            }
        });
    </script>
    <script> 
        var user_page_size = "{{ user_page_size }}";
        var $option_list = $('#user_nums option');
        $.each($option_list,function(i, Ele){
            if (user_page_size === Ele.getAttribute('value')) {
                Ele.setAttribute('selected','selected')
            }
        });
        $('#user_nums').change(function () {
            window.location.replace("{% url 'user_list'%}"+"?"+"user_page_size="+$(this).find('option:selected').val());
        })
     //绑定模态框展示的方法 
    $('.bs-example-modal-sm').on('show.bs.modal', function (event) {  
        var button = $(event.relatedTarget) // 触发事件的按钮  
        var recipient = button.data('whatever') // 解析出whatever内容  
        var modal = $(this)  //获得模态框本身
        modal.find('.modal-title').text('删除用户')  // 更改将title的text
        modal.find('.modal-footer a').attr('href', recipient)  
    })  
    </script>  
{% endblock %}
